<!DOCTYPE HTML>
<html>

<head>
  <title>SmartAjax</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
  
	<script src="../smartajax/libs/jquery.js"></script>

	<script src="../smartajax/load.smartajax.js"></script>
	<script>
		SmartAjax_load('../smartajax/', function(){
			SmartAjax.isDebug = false;
			SmartAjax.setOptions({
				cache: false,
				reload: false,
				containers:
				[
					{selector: '#content'}
				],
				
				before: function()
				{
					$('#ajax-loader').show();
					
					SmartAjax.proceed();
				},
				success: function()
				{
					$('#site_middle').slideUp(500, SmartAjax.proceed);
				},
				done: function()
				{
					$('#ajax-loader').hide();
					$('#site_middle').slideDown(500);
				}
			});
			
			SmartAjax.bind('a');
		}, true);
	</script>
</head>

<body>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">

          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html"><span class="logo_colour">Smart</span>Ajax</a></h1>
          <h2>Smart, powerful and easy to setup AJAX solution!</h2>
        </div>
      </div>
      <div id="menubar" style="position: relative;">
        <ul id="menu">

          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li><a href="index.html">Home</a></li>
          <li><a href="features.html">Features</a></li>
          <li><a href="howitworks.html">How it works</a></li>
          <li><a href="documentation.html">Documentation</a></li>
          <li><a href="contact.html">Email support</a></li>

        </ul>
        
        <div id="ajax-loader" style="position: absolute;top: 20px;right: 20px;display:none;"><img src="style/ajax-loader.gif" width="31" height="31" /></div>
      </div>
    </div>
  <div id="site_middle">
    <div id="site_content">
      <div class="sidebar">
        <!-- insert your sidebar items here -->
        <h3>Latest News</h3>

        <h4>SmartAjax launched</h4>
        <h5>19.07.2011</h5>
        <p>SmartAjax is now for sale on codecanyon.<br /><a target="_blank" href="http://codecanyon.net">Read more</a></p>
        <p></p>
        
        <h3>Useful Links</h3>
        <ul>

          <li><a target="_blank" href="http://codecanyon.net">CodeCanyon</a></li>
          <li><a target="_blank" href="http://jquery.com">jQuery</a></li>
        </ul>
        
      </div>
      <div id="content">        <!-- insert the page content here -->
        <h1>So, how does it work?</h1>
        <p>SmartAjax binds to all links you specify and overrides their default behavour so that it loads them with AJAX. This means that if the user has disabled javascript your website will still continue to function the normal, non-AJAX way.</p>

        <p>If the user has a HTML5-enabled browser the URL in the address bar will change without the need of a hash-component (#). Instead it uses the new HTML5 api (with the help of a library called History.js). If the user uses an old browser (without HTML5) SmartAjax will revert back to using the hash (#url) and keep its whole functionality intact.</p>
        <p>SmartAjax also binds to your website's forms and is able to submit them with AJAX! This makes every form an AJAX one INSTANTLY.</p>
        <p>SmartAjax is intelligent enough to recognise which links it shouldn't try to fetch with AJAX. These are for example directly linked images, archives, audio and video files etc. It even recognises them if they don't have an extension (for example the link "/get/file?id=5") by using some low-level HTTP and XHR stuff.</p>
      </div>
    </div>
  </div>
    <div id="content_footer"></div>

    <div id="footer">
      <a href="http://www.html5webtemplates.co.uk">free template from HTML5webtemplates.co.uk</a>
    </div>
  </div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>